<template>
    <div>
        <n-config-provider :theme-overrides="themeOverrides">
            
            <n-message-provider>
                <n-notification-provider>
                    <navigation-bar></navigation-bar>
                    <router-view :key="$route.fullPath"></router-view>
                </n-notification-provider>
                <back-top></back-top>
                <home-music-player></home-music-player>
                <n-modal v-model:show="isLoadDing">
                    <n-card style="width: 200px;" :bordered="false" size="huge">
                        <div class="flex items-center justify-center">
                            <n-spin size="large"/>
                        </div>
                    </n-card>
                </n-modal>
            </n-message-provider>
        
        </n-config-provider>
    </div>
</template>
<script>
import NavigationBar from "@/views/home/NavigationBar";
import HomeMusicPlayer from "@/views/player/HomeMusicPlayer";
import BackTop from "@/components/BackTop";

import {NNotificationProvider, NMessageProvider, NModal, NCard, NSpin, NConfigProvider} from 'naive-ui';
import {onMounted, ref, watchEffect} from "vue";
import {useStore} from "vuex";

export default {
    name: "App",
    setup() {
        
        /**
         * @type import('naive-ui').GlobalThemeOverrides
         * naive-ui样式调整
         */
        const themeOverrides = {
            Input: {
                "caretColor": "#B7BCBAFF",
                "borderHover": "1px solid #666666FF",
                "borderFocus": "1px solid #666666FF",
                "loadingColor": "#A01818FF",
                "boxShadowFocus": "0 0 0 2px rgba(194, 914, 194, 0.2)"
            },
            Tabs: {
                "tabTextColorActiveLine": "#C20C0CFF",
                "tabTextColorHoverLine": "#C20C0CFF",
                "tabTextColorActiveBar": "#C20C0CFF",
                "tabTextColorHoverBar": "#C20C0CFF",
                "tabTextColorActiveCard": "#C20C0CFF",
                "barColor": "#C20C0CFF"
            },
            Pagination: {
                "itemBorder": "1px solid #707070",
                "itemBorderHover": "1px solid #707070",
                "itemBorderPressed": "1px solid #707070",
                "itemBorderActive": "1px solid #C20C0C",
                "itemTextColorHover": "#C20C0CFF",
                "itemTextColorPressed": "#C20C0CFF",
                "itemTextColorActive": "#C20C0CFF"
            }
        }
        
        // const TAG = "App.vue";
        const isLoadDing = ref(false);
        const store = useStore();
        // 显示加载遮罩
        const beLoading = () => {
            isLoadDing.value = true;
            setTimeout(() => {
                isLoadDing.value = false;
            }, 1000);
        }
        onMounted(() => {
            watchEffect(() => {
                let flag = store.state.user.beLoading;
                if (flag === true) {
                    beLoading();
                    store.commit('setLoading', false);
                }
            })
            beLoading();
        })
        return {
            isLoadDing,
            beLoading,
            themeOverrides
        }
    },
    components: {
        NavigationBar,
        HomeMusicPlayer,
        BackTop,
        NNotificationProvider,
        NMessageProvider,
        NModal,
        NCard,
        NSpin,
        NConfigProvider
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/base.scss';

</style>
